<template>
  <div class="">
    <div class="chart_div flex">
      <div class="common_block_div" style="width: 30%;">
        <div class="common_title_small">我的督办</div>
        <div class="echarts" id="echart1">

        </div>
      </div>
      <div class="common_block_div" style="width: 30%;">
        <div class="common_title_small">我的主办</div>
        <div class="echarts" id="echart2">

        </div>
      </div>
      <div class="common_block_div" style="width: 40%; flex-shrink: 0;">
        <div class="common_title_small">近期督办</div>
        <div class="flex">
          <div class="flex1">
            <div class="echarts" id="echart3">

            </div>
          </div>
          <div class="tts_d flex_ac_jc flex_d">
              <el-tag type="danger">已逾期：<span>20</span></el-tag>
              <el-tag type="warning">将到期：<span>20</span></el-tag>
              <el-tag type="success">执行中：<span>20</span></el-tag>
              <el-tag type="info">待确认：<span>20</span></el-tag>
          </div>
        </div>
      </div>
    </div>

    <div class="chart_div flex">
      <div class="common_block_div flex1">
        <div class="common_title_small">最新督办汇总</div>
        <div class="echarts" id="echart4" style="height: 400px;">

        </div>
      </div>

      <div class="common_block_div" style="width: 40%;">
        <div class="common_title_small">督办整体汇总</div>
        <div class="echarts" id="echart5" style="height: 400px;">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let options1={
  tooltip: {
      trigger: 'axis',
      backgroundColor:'rgba(0,0,0,0.5)',
      textStyle:{
        color:'#fff'
      },
      fontSize:14,
      borderColor:'rgba(0,0,0,0)',
      // formatter:function(data){
      //   console.log(data);
      //   return data[0].value+'人'
      // }
  },
  // color:['red','green'],
  // dataZoom: [{
  //     type: 'inside'
  // }],
  xAxis: {
      type: 'category',
      axisLabel:{
          color:'#666',
          fontSize:10
      },
      axisLine: {
          show: true,
          lineStyle: {
              color: 'rgba(0,0,0,0.1)'
          }
      },
      boundaryGap:true,
      data: []
  },
  yAxis: {
      name:'',
      nameTextStyle:{
        color:'#fff'
      },

      type: 'value',
      axisLabel:{
          color:'#666'
      },
      splitLine:{
          show:false
      },
      axisLine: {
          show: true,
          lineStyle: {
              color: 'rgba(0,0,0,0.1)'
          }
      },
  },
  grid:{
      left:10,
      top:40,
      right:10,
      bottom:10,
      containLabel:true
  },
  series: []
}

let option2 = {

  polar: {
    radius: [0, '80%']
  },
  angleAxis: {
    max: 4,
    startAngle: 90
  },

  grid:{
      left:10,
      top:10,
      right:10,
      bottom:10,
      containLabel:true
  },
  radiusAxis: {
    type: 'category',
    data: ['a', 'b', 'c', 'd'],
    axisLabel: {
      interval: 0, // 设置为0以确保所有标签都显示
      color:'#666',
      fontSize:10
    }
  },
  tooltip: {},
  series: {
    type: 'bar',
    data: [2, 1.2, 2.4, 3.6],
    coordinateSystem: 'polar',
    label: {
      show: false,
      position: 'middle',
      formatter: '{b}: {c}'
    }
  }
};
let myChart1
let myChart2
let myChart3
let myChart4
let myChart5
export default {
  name: 'needCache',
  data () {
    return {
      activeName:'1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      alarm: [],
      inspection:[],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16,
        keywords: undefined,
        status: undefined
      },
      openOptions: [{id:'1',title:'选项1'},{id:'2',title:'选项2'}],
      open:false,
      type1:'month',  //day, week, month,, year
      all_num1:0,
      type2:'month',  //day, week, month,, year
      all_num2:0
    }
  },
  activated() {
    this.init_chart()
    // this.getList();
    // this.get_data1();
    // this.get_data2()
  },
  methods:{
    init_chart(){
      const _this=this;
      _this.$nextTick(()=>{
        let _data={...options1};
        _data.xAxis.data=['已逾期','将到期','待确认','已查看','执行中','已办结'];
        _data.series=[
          {
            data: [
              {
                value:10,
                 itemStyle:{
                   color:'#ff5e46'
                 }
              },
              {
                value:23,
                 itemStyle:{
                   color:'#ff9800'
                 }
              },
              {
                value:12,
                 itemStyle:{
                   color:'#e1c191'
                 }
              },
              {
                value:15,
                 itemStyle:{
                   color:'#e6e3e3'
                 }
              },
              {
                value:45,
                 itemStyle:{
                   color:'#28bf94'
                 }
              },
              {
                value:22,
                 itemStyle:{
                   color:'#7d7a7a'
                 }
              }
            ],
            barWidth:20,
            type: 'bar',
          }
        ]
        if(!myChart1){
          myChart1 = echarts.init(document.getElementById('echart1'));
        }
        myChart1.setOption(_data,true);


        if(!myChart2){
          myChart2 = echarts.init(document.getElementById('echart2'));
        }
        myChart2.setOption(_data,true);


        if(!myChart3){
          myChart3 = echarts.init(document.getElementById('echart3'));
        }
        myChart3.setOption(_data,true);


        if(!myChart4){
          myChart4 = echarts.init(document.getElementById('echart4'));
        }
        _data.xAxis.data=['2025-10-02','2025-10-02','2025-10-02','2025-10-02','2025-10-02','2025-10-02'];
        _data.series[0].type="line";

         _data.dataZoom= [{
            type: 'inside'
        }],


        _data.series[0].data=_data.series[0].data.map(v=>v.value);
        myChart4.setOption(_data,true);


        let _data2={...option2};
        _data2.radiusAxis.data=['已逾期','将到期','待确认','已查看','执行中','已办结'];
        _data2.angleAxis.max=100
        _data2.series.data=[{
                value:10,
                 itemStyle:{
                   color:'#ff5e46'
                 }
              },
              {
                value:23,
                 itemStyle:{
                   color:'#ff9800'
                 }
              },
              {
                value:12,
                 itemStyle:{
                   color:'#e1c191'
                 }
              },
              {
                value:15,
                 itemStyle:{
                   color:'#e6e3e3'
                 }
              },
              {
                value:45,
                 itemStyle:{
                   color:'#28bf94'
                 }
              },
              {
                value:22,
                 itemStyle:{
                   color:'#7d7a7a'
                 }
              }]
        if(!myChart5){
          myChart5 = echarts.init(document.getElementById('echart5'));
        }
        myChart5.setOption(_data2,true);
      })
    },
    tab_type1(type){
      if(this.type1!=type){
        this.type1=type;
        this.get_data1()
      }
    },
    get_data1(){
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Index/pieChartRwo", {params:{period:_this.type1}}).then(function(res) {
        if(res){
          let all_num=0;
          for(let i=0;i<res.data.length;i++){
            all_num+=parseFloat(res.data[i].value)
          }
          _this.all_num1=all_num;
          let _data={...options2};
          _data.series[0].data=res.data;
          _this.$nextTick(()=>{
            if(!myChart2){
              myChart2 = echarts.init(document.getElementById('chart_d2'));
            }
            myChart2.setOption(_data);
          })
          // _this.alarm=alarm;
          // _this.inspection=inspection;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },

    tab_type2(type){
      if(this.type2!=type){
        this.type2=type;
        this.get_data2()
      }
    },
    get_data2(){
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Index/pieChartMachineRoomRecrd", {params:{period:_this.type2}}).then(function(res) {
        if(res){
          let all_num=0;
          for(let i=0;i<res.data.length;i++){
            all_num+=parseFloat(res.data[i].value)
          }
          _this.all_num2=all_num;
          let _data={...options2};
          _data.series[0].data=res.data;
          _this.$nextTick(()=>{
            if(!myChart3){
              myChart3 = echarts.init(document.getElementById('chart_d3'));
            }
            myChart3.setOption(_data);
          })
          // _this.alarm=alarm;
          // _this.inspection=inspection;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Index/index", {params:{}}).then(function(res) {
        if(res){
          let alarm=[];
          for(let i=0;i<res.data.alarm.length;i++){
            if(alarm.length<9){
              alarm.push(res.data.alarm[i])
            }else{
              break
            }
          }
          let inspection=[];
          for(let i=0;i<res.data.inspection.length;i++){
            if(inspection.length<9){
              inspection.push(res.data.inspection[i])
            }else{
              break
            }
          }
          _this.alarm=alarm;
          _this.inspection=inspection;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 16,
        keywords: undefined,
        status: undefined
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart_div{gap:20px;}
.chart_div .common_block_div{margin-bottom: 20px;}
.chart_div .echarts{width: 100%; height:250px; }
.tts_d{width: 100px; margin-left: 10px; justify-content: space-around; padding: 50px 0;}
</style>
